<template>
  <div class="student">
      <h2>学生姓名：{{name}}</h2>
      <h2>学生性别：{{sex}}</h2>

  </div>
</template>

<script>


export default {

  // eslint-disable-next-line vue/multi-word-component-names
  name: "Student",
  data(){
    return{

      sex:'男',
      name:'张三'
    }
  },



}
</script>
<!--因为无论多少个组件 最后样式都是放在一起，所以会出现组件命名冲突
scoped 表示此样式只负责自己组件里  {
        若app里写样式则不需加scoped ，因为app组件是头，里面写样式任何子组件都可以用
}

-->
<style scoped lang="less">
    .student{
      background-color: orange;
    }
</style>